<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 120 121"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path stroke-width="2" fill="#1A446C" d="M57 91a12.84 12.84 0 0 1-8.722-3.417 12.901 12.901 0 0 1-4.097-8.44 38.606 38.606 0 0 1-20.404-16.89 38.76 38.76 0 0 1-4.753-26.093 38.702 38.702 0 0 1 13.133-23.028A38.527 38.527 0 0 1 57 4a38.519 38.519 0 0 1 26.117 10.207 38.702 38.702 0 0 1 12.326 25.237 3.034 3.034 0 0 1-1.863 2.995c-.388.16-.804.237-1.223.228a3.468 3.468 0 0 1-2.307-.96 3.484 3.484 0 0 1-1.068-2.263 32.269 32.269 0 0 0-6.017-15.765 32.157 32.157 0 0 0-13.143-10.553 32.071 32.071 0 0 0-32.269 3.893 32.212 32.212 0 0 0-10.27 13.377 32.295 32.295 0 0 0 4.508 32.268 32.148 32.148 0 0 0 13.541 10.034 12.882 12.882 0 0 1 4.382-5.206 12.836 12.836 0 0 1 18.12 3.678 12.911 12.911 0 0 1-4.28 18.03A12.832 12.832 0 0 1 57 91ZM24.915 74.889h.585a45.611 45.611 0 0 0 8.306 6.444h-8.891c-3.606 0-6.486 2.881-6.486 6.445 0 8.436 3.998 14.719 10.755 19.03 6.878 4.402 16.662 6.748 27.816 6.748s20.938-2.346 27.816-6.748c6.75-4.318 10.755-10.588 10.755-19.03 0-1.71-.677-3.349-1.882-4.557a6.42 6.42 0 0 0-4.546-1.888h-13.12a19.413 19.413 0 0 0 0-6.444h13.12c3.41 0 6.68 1.358 9.091 3.775A12.906 12.906 0 0 1 102 87.778c0 10.897-5.355 19.114-13.725 24.469C80.034 117.512 68.925 120 57 120c-11.925 0-23.034-2.488-31.275-7.753C17.355 106.898 12 98.669 12 87.777c0-7.172 5.805-12.888 12.915-12.888Zm57.8-32.222c0 4.36-1.101 8.65-3.204 12.467a25.752 25.752 0 0 1-8.818 9.36 19.284 19.284 0 0 0-5.979-4.105 19.305 19.305 0 0 0 9.421-8.847A19.376 19.376 0 0 0 75.88 38.72a19.341 19.341 0 0 0-6.715-11.053A19.256 19.256 0 0 0 57 23.337c-4.43 0-8.726 1.529-12.164 4.33A19.341 19.341 0 0 0 38.12 38.72a19.376 19.376 0 0 0 1.744 12.822 19.305 19.305 0 0 0 9.42 8.847 19.333 19.333 0 0 0-5.978 4.105 25.766 25.766 0 0 1-12.021-21.827 25.81 25.81 0 0 1 7.531-18.228A25.682 25.682 0 0 1 57 16.889c6.82 0 13.36 2.716 18.183 7.55a25.81 25.81 0 0 1 7.531 18.228Z" data-follow-stroke="#1A446C" :stroke="_stroke"/><circle fill="#06F" r="19.5" cy="81.5" cx="56.5"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Solutionskey9 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
